<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="/static/css/login_reglogin.css" rel='stylesheet' type='text/css'/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="bg">
    <img src="/static/images/c.jpg" alt="">
</div>

<div id='test'></div>

<div class="main">
    <div class="header">
        <h1>创建一个新账户！</h1>
    </div>
    <p></p>
    <ul class="left-form">
        <h2>新账户:</h2>
        <li>
            <input type="text" class="username" name="username" placeholder="请输入用户名" required maxlength="11"/>
            <div class="clear"></div>
        </li>
        <li>
            <input type="email" class="email" name="email" placeholder="请输入邮箱" required/>
            <div class="clear"></div>
        </li>

        <li>
            <input type="phone" class="phone" name="phone" placeholder="请输手机号" required/>
            <input type="button" id="sms" onclick="settime(this)" value="免费获取验证码">
            <div class="clear"></div>
        </li>
        <li>
            <input type="sms_num" class="sms_num" name="sms_num" placeholder="请输入验证码" required/>
            <div class="clear"></div>

        <li>
            <input type="password" class="password_1" name="password_1" placeholder="请输入密码" required minlength="6"
                   maxlength="11"/>
            <div class="clear"></div>
        </li>
        <li>
            <input type="password" class="password_2" name="password_2" placeholder="请再次确认密码" required minlength="6"
                   maxlength="11"/>
            <div class="clear"></div>
        </li>
        <li style="border:none">
            <input type="button" value="创建并登录" onclick="register()">
        </li>
    </ul>
    <div class="clear"></div>
</div>
</body>


<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return null;
    }


    var countdown = 60;

    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value = "免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
                settime(obj)
            }
            , 1000)
    }

    function register(){
        let username = $('.username').val();
        let email = $('.email').val();
        let phone = $('.phone').val();
        let password_1 = $('.password_1').val();
        let password_2 = $('.password_2').val();

        let post_data = {
            'username': username,
            'email': email,
            'phone': phone,
            'password_1': password_1,
            'password_2': password_2
        };

        $.ajax({
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(post_data),
            url: 'http://127.0.0.1:8000/v1/users/',
            success: function (res){
                if(res.code === 200){
                    alert('注册成功');
                }else{
                    alert(res.msg);
                }
            }
        });
    }


</script>


</html>
